<!DOCTYPE html><html lang="zh-Hans"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta name="description" content="晟松的博客"><meta name="keywords" content=""><meta name="author" content="晟松"><meta name="copyright" content="晟松"><title>hunnu | 晟松</title><link rel="shortcut icon" href="/logo.png"><link rel="stylesheet" href="/css/index.css?version=1.9.0"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css?version=1.9.0"><meta name="format-detection" content="telephone=no"><meta http-equiv="x-dns-prefetch-control" content="on"><link rel="dns-prefetch" href="https://cdn.jsdelivr.net"><link rel="dns-prefetch" href="https://hm.baidu.com"><script>var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?c34d81d53341febe06a155941e2df16d";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();</script><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><script>var GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容:${query}"}},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  hexoVersion: '5.4.0'
} </script><meta name="generator" content="Hexo 5.4.0"></head><body><i class="fa fa-arrow-right" id="toggle-sidebar" aria-hidden="true"></i><div id="sidebar" data-display="true"><div class="toggle-sidebar-info text-center"><span data-toggle="切换文章详情">切换站点概览</span><hr></div><div class="sidebar-toc"><div class="sidebar-toc__title">目录</div><div class="sidebar-toc__progress"><span class="progress-notice">你已经读了</span><span class="progress-num">0</span><span class="progress-percentage">%</span><div class="sidebar-toc__progress-bar"></div></div><div class="sidebar-toc__content"></div></div><div class="author-info hide"><div class="author-info__avatar text-center"><img src="/img/avatar.png"></div><div class="author-info__name text-center">晟松</div><div class="author-info__description text-center">晟松的博客</div><div class="follow-button"><a target="_blank" rel="noopener" href="https://gitee.com/cheng_song">Gitee</a></div><hr><div class="author-info-articles"><a class="author-info-articles__archives article-meta" href="/archives"><span class="pull-left">文章</span><span class="pull-right">52</span></a><a class="author-info-articles__tags article-meta" href="/tags"><span class="pull-left">标签</span><span class="pull-right">45</span></a></div></div></div><div id="content-outer"><div id="top-container" style="background-image: url(/img/blog-bg.jpg)"><div id="page-header"><span class="pull-left"> <a id="site-name" href="/">晟松</a></span><i class="fa fa-bars toggle-menu pull-right" aria-hidden="true"></i><span class="pull-right menus">   <a class="site-page" href="/">Home</a><a class="site-page" href="/archives">Archives</a><a class="site-page" href="/tags">Tags</a><a class="site-page" href="/categories">Categories</a></span><span class="pull-right"><a class="site-page social-icon search"><i class="fa fa-search"></i><span> 搜索</span></a></span></div><div id="post-info"><div id="post-title">无题</div><div id="post-meta"><time class="post-meta__date"><i class="fa fa-calendar" aria-hidden="true"></i> 2022-08-20</time><div class="post-meta-wordcount"><span>字数总计: </span><span class="word-count">893</span><span class="post-meta__separator">|</span><span>阅读时长: 3 分钟</span></div></div></div></div><div class="layout" id="content-inner"><article id="post"><div class="article-container" id="post-content"><p>说明：</p>
<p>本组件主要使用于三级树结构时，会对其中第二层级与第三层级的树节点进行选择时进行使用。常见表现场景即为省市区三级结构，会分别选择其中的市级与区级，此种情况下可使用此组件。常配合a-modal进行使用</p>
<p>直观视觉效果：</p>
<p>常规使用：<img src="https://alidocs.oss-cn-zhangjiakou.aliyuncs.com/res/a4jKqmQVY7p2qw19/img/3808cdcc-2458-472f-b94a-feee63eb7a75.png" alt="img"></p>
<p><img src="https://alidocs.oss-cn-zhangjiakou.aliyuncs.com/res/a4jKqmQVY7p2qw19/img/a1495873-bf82-403a-9b5d-4445bb5bcd96.png" alt="img"></p>
<p>已存在被选择节点使用：</p>
<p><img src="https://alidocs.oss-cn-zhangjiakou.aliyuncs.com/res/a4jKqmQVY7p2qw19/img/e07907ea-39b7-4a7a-9026-22e3f1b008c8.png" alt="img"></p>
<p>使用示例：</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;a-modal</span><br><span class="line">    :mask=&quot;false&quot;</span><br><span class="line">    :title=&quot;unitModalTitle&quot;</span><br><span class="line">    :visible=&quot;selectUnitModalVisible&quot;</span><br><span class="line">    :confirmLoading=&quot;selectUnitModalConfirmLoading&quot;</span><br><span class="line">    @ok=&quot;selectUnitOk&quot;</span><br><span class="line">    @cancel=&quot;selectUnitCancel&quot;</span><br><span class="line">    :mask-closable=&quot;false&quot;</span><br><span class="line">    width=&quot;50vw&quot;</span><br><span class="line">    :get-container=&quot;()=&gt;$refs.carryDistributedTaksAddContainer&quot;</span><br><span class="line">    :destroyOnClose=&quot;true&quot;</span><br><span class="line">&gt;</span><br><span class="line">    &lt;!-- 注意上方的destroyOnClose，关闭时销毁内部元素组件 --&gt;</span><br><span class="line">    &lt;u-two-tree-select</span><br><span class="line">        title=&quot;选择单位&quot;</span><br><span class="line">        rightTitle=&quot;已选单位&quot;</span><br><span class="line">        :pureTreeData=&quot;twoSelectTreeData&quot;</span><br><span class="line">        :tabArr=&quot;tabArr&quot;</span><br><span class="line">        :checkedUnitsIds=&quot;twoSelectTreeCheckedUnitsIds&quot;</span><br><span class="line">        :preCheckedUnitsId=&quot;selectedRegionIds&quot;</span><br><span class="line">        @on-tree-check-list=&quot;getTwoTreeCheckedIds&quot;</span><br><span class="line">        @on-tree-check-list-node=&quot;getTwoTreeCheckedNodes&quot;</span><br><span class="line">    &gt;&lt;/u-two-tree-select&gt;</span><br><span class="line">&lt;/a-modal&gt;</span><br></pre></td></tr></table></figure>



<p>数据说明：</p>
<p>pureTreeData示例</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">let twoSelectTreeData = [&#123;</span><br><span class="line">    id: &quot;420000&quot;,</span><br><span class="line">    text: &quot;湖北省&quot;,</span><br><span class="line">    iconCls: null,</span><br><span class="line">    state: null,</span><br><span class="line">    checked: false,</span><br><span class="line">    children: [</span><br><span class="line">        &#123;</span><br><span class="line">            id: &quot;420100&quot;,</span><br><span class="line">            text: &quot;武汉市&quot;,</span><br><span class="line">            iconCls: null,</span><br><span class="line">            state: null,</span><br><span class="line">            checked: true,</span><br><span class="line">            children: [],</span><br><span class="line">            attributes: &#123;</span><br><span class="line">                checkable: true,</span><br><span class="line">                checked: true</span><br><span class="line">            &#125;,</span><br><span class="line">            displayOrder: null,</span><br><span class="line">            sortFlag: 0,</span><br><span class="line">            onlineNum: null,</span><br><span class="line">            offlineNum: null,</span><br><span class="line">            total: null,</span><br><span class="line">            telMobile: null,</span><br><span class="line">            gridId: null,</span><br><span class="line">            stateFlag: null</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            id: &quot;420200&quot;,</span><br><span class="line">            text: &quot;黄石市&quot;,</span><br><span class="line">            iconCls: null,</span><br><span class="line">            state: null,</span><br><span class="line">            checked: true,</span><br><span class="line">            children: [</span><br><span class="line">                &#123;</span><br><span class="line">                    id: &quot;420201&quot;,</span><br><span class="line">                    text: &quot;黄石市市辖区&quot;,</span><br><span class="line">                    iconCls: null,</span><br><span class="line">                    state: null,</span><br><span class="line">                    checked: false,</span><br><span class="line">                    children: [],</span><br><span class="line">                    attributes: &#123;</span><br><span class="line">                        checked: false</span><br><span class="line">                    &#125;,</span><br><span class="line">                    displayOrder: null,</span><br><span class="line">                    sortFlag: 0,</span><br><span class="line">                    onlineNum: null,</span><br><span class="line">                    offlineNum: null,</span><br><span class="line">                    total: null,</span><br><span class="line">                    telMobile: null,</span><br><span class="line">                    gridId: null,</span><br><span class="line">                    stateFlag: null</span><br><span class="line">                &#125;,</span><br><span class="line">                &#123;</span><br><span class="line">                    id: &quot;420202&quot;,</span><br><span class="line">                    text: &quot;黄石港区&quot;,</span><br><span class="line">                    iconCls: null,</span><br><span class="line">                    state: null,</span><br><span class="line">                    checked: false,</span><br><span class="line">                    children: [],</span><br><span class="line">                    attributes: &#123;</span><br><span class="line">                        checked: false</span><br><span class="line">                    &#125;,</span><br><span class="line">                    displayOrder: null,</span><br><span class="line">                    sortFlag: 0,</span><br><span class="line">                    onlineNum: null,</span><br><span class="line">                    offlineNum: null,</span><br><span class="line">                    total: null,</span><br><span class="line">                    telMobile: null,</span><br><span class="line">                    gridId: null,</span><br><span class="line">                    stateFlag: null</span><br><span class="line">                &#125;</span><br><span class="line">            ]</span><br><span class="line">        &#125;</span><br><span class="line">    ],</span><br><span class="line">    attributes: &#123;</span><br><span class="line">        checkable: true,</span><br><span class="line">        checked: false</span><br><span class="line">    &#125;,</span><br><span class="line">    displayOrder: null,</span><br><span class="line">    sortFlag: 0,</span><br><span class="line">    onlineNum: null,</span><br><span class="line">    offlineNum: null,</span><br><span class="line">    total: null,</span><br><span class="line">    telMobile: null,</span><br><span class="line">    gridId: null,</span><br><span class="line">    stateFlag: null</span><br><span class="line">&#125;];</span><br><span class="line"></span><br><span class="line">const tabArr: Array&lt;Tab&gt; = [</span><br><span class="line">    &#123;</span><br><span class="line">        id: &quot;city&quot;,</span><br><span class="line">        name: &quot;按市选&quot;,</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">        id: &quot;region&quot;,</span><br><span class="line">        name: &quot;按区选&quot;,</span><br><span class="line">    &#125;,</span><br><span class="line">];</span><br><span class="line"></span><br><span class="line">let twoSelectTreeCheckedUnitsIds = [&#x27;123&#x27;,&#x27;2233&#x27;]</span><br><span class="line">let selectedRegionIds = [&#x27;223&#x27;,&#x27;23&#x27;]</span><br><span class="line"></span><br><span class="line">public getTwoTreeCheckedIds(ids: any[]) &#123;</span><br><span class="line">  </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">public getTwoTreeCheckedNodes(nodes: any[]) &#123;</span><br><span class="line">  </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>





<p>props说明：</p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody><tr>
<td>title</td>
<td>左侧card上方标题</td>
<td>string</td>
<td>‘’</td>
</tr>
<tr>
<td>rightTitle</td>
<td>右侧两个card标题的后半部分</td>
<td>string</td>
<td>‘已选’</td>
</tr>
<tr>
<td>pureTreeData</td>
<td>传递给树进行展示的树结构数据，注意必须为三层树结构，不能为两层，也不能为四层</td>
<td>array&lt;{id,key, text, children,checked}&gt;</td>
<td>[]</td>
</tr>
<tr>
<td>tabArr</td>
<td>左侧用于切换的tab的数据，可参考a-tabs，其中只能包含两个元素</td>
<td>array&lt;{id,name}&gt;</td>
<td>[]</td>
</tr>
<tr>
<td>checkedUnitsIds</td>
<td>树节点中被选择的树节点id数组，主要用于展示默认被选择的树节点与右侧被选择的节点名称常用于新增界面时，会多次选择树节点，通过此props可展示上一次选择的节点</td>
<td>string[]</td>
<td>[]</td>
</tr>
<tr>
<td>preCheckedUnitsId</td>
<td>树中已被选择过且无法取消的树节点，主要用于右侧展示这些已经选择过的节点的名称</td>
<td>string[]</td>
<td>[]</td>
</tr>
<tr>
<td>@on-tree-check-list</td>
<td>实时传递树结构中被选择的节点id数组</td>
<td>function(array<a href="id:string">id:string</a>){}</td>
<td></td>
</tr>
<tr>
<td>@on-tree-check-list-node</td>
<td>被选择的树节点的本身所组成的数组</td>
<td>function(array&lt;{id,key, text, children,checked}&gt;){}</td>
<td></td>
</tr>
</tbody></table>
<p>其他说明：</p>
<p>注意tabArr的name的名称一般为三个字，如按省选，按市选，对应右侧出现省级已选单位，市级已选单位，可自行修改代码展示逻辑</p>
<p>配合a-modal使用的原因为，可最终在a-modal的ok事件中将被选择的树节点id进行最终保存，在cancle事件中将这些选择进行丢弃。</p>
<p>组件来源：urbanManage-vue- operManageService（<a target="_blank" rel="noopener" href="http://192.168.101.70:8000/frontend/urbanManage-vue.git%EF%BC%89">http://192.168.101.70:8000/frontend/urbanManage-vue.git）</a></p>
</div></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="mailto:undefined">晟松</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://chengsong.info/2022/08/20/test/">https://chengsong.info/2022/08/20/test/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://chengsong.info">晟松</a>！</span></div></div><div class="post-meta__tag-list"></div><nav id="pagination"><div class="prev-post pull-left"><a href="/2022/12/10/js%E5%B8%B8%E7%94%A8%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/"><i class="fa fa-chevron-left">  </i><span>js常用设计模式</span></a></div><div class="next-post pull-right"><a href="/2022/07/23/git%E4%B8%8D%E5%B8%B8%E8%A7%81%E6%93%8D%E4%BD%9C%E7%86%9F%E6%82%89/"><span>git不常见操作熟悉</span><i class="fa fa-chevron-right"></i></a></div></nav></div></div><footer class="footer-bg" style="background-image: url(/img/blog-bg.jpg)"><div class="layout" id="footer"><div class="copyright">&copy;2020 - 2023 By 晟松</div><div class="framework-info"><span>驱动 - </span><a target="_blank" rel="noopener" href="http://hexo.io"><span>Hexo</span></a><span class="footer-separator">|</span><span>主题 - </span><a target="_blank" rel="noopener" href="https://github.com/Molunerfinn/hexo-theme-melody"><span>Melody</span></a></div><div class="icp"><a target="_blank" rel="noopener" href="http://www.beian.miit.gov.cn/"><span>湘ICP备2020021729号</span></a></div><div class="busuanzi"><script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><span id="busuanzi_container_page_pv"><i class="fa fa-file"></i><span id="busuanzi_value_page_pv"></span><span></span></span></div></div></footer><i class="fa fa-arrow-up" id="go-up" aria-hidden="true"></i><script src="https://cdn.jsdelivr.net/npm/animejs@latest/anime.min.js"></script><script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@latest/velocity.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-ui-pack@latest/velocity.ui.min.js"></script><script src="/js/utils.js?version=1.9.0"></script><script src="/js/fancybox.js?version=1.9.0"></script><script src="/js/sidebar.js?version=1.9.0"></script><script src="/js/copy.js?version=1.9.0"></script><script src="/js/fireworks.js?version=1.9.0"></script><script src="/js/transition.js?version=1.9.0"></script><script src="/js/scroll.js?version=1.9.0"></script><script src="/js/head.js?version=1.9.0"></script><script src="/js/search/local-search.js"></script><script>if(/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) {
  $('#nav').addClass('is-mobile')
  $('footer').addClass('is-mobile')
  $('#top-container').addClass('is-mobile')
}</script><div class="search-dialog" id="local-search"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章"></div></div></div><hr><div id="local-search-results"><div id="local-hits"></div><div id="local-stats"><div class="local-search-stats__hr" id="hr"><span>由</span> <a target="_blank" rel="noopener" href="https://github.com/wzpan/hexo-generator-search" style="color:#49B1F5;">hexo-generator-search</a>
 <span>提供支持</span></div></div></div><span class="search-close-button"><i class="fa fa-times"></i></span></div><div class="search-mask"></div></body></html>